<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>11简版小广告</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		@keyframes heartBeat {
			0% {
				transform: scale(1)
			}

			14% {
				transform: scale(1.1)
			}

			28% {
				transform: scale(1)
			}

			42% {
				transform: scale(1.1)
			}

			70% {
				transform: scale(1)
			}
		}

		.ad {
			width: 300px;
			height: 250px;
			background-color: #000;
			position: fixed;
			bottom: 5px;
			right: 5px;
			color: #fff;
			animation: heartBeat 3s linear infinite;
			/* display: none; */
		}

		.ad .title {
			overflow: hidden;
			width: 100%;
		}

		.ad .title .countBox {
			float: left;
		}

		.ad .title .close {
			float: right;
			width: 20px;
			height: 20px;
			background-color: rgba(255, 255, 255, .3);
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}

		.ad img {
			width: 100%;
			height: 200px;
			margin: 15px 0;
		}
	</style>
</head>

<body>
	<!-- <div class="ad">
		<div class="title" data-tag="true">
			<div class="countBox">距离广告关闭还有<span class="count">10</span>秒</div>
			<div class="close">×</div>
		</div>
		<img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
	</div> -->
</body>
<script>
	//小广告在页面停留3s后出现
	//且出现10s倒计时，10s后，小广告自行关闭；
	//用户点击关闭按钮，也可关闭小广告

	// 延迟3s后 动态生成小广告
	setTimeout(function () {
		// debugger;
		var ad = document.createElement("div");
		// ad.setAttribute("class", "ad");
		ad.className = "ad";

		var title = document.createElement("div");
		title.setAttribute("class", "title");
		// title.setAttribute("data-tag", "true");
		ad.dataset.tag = true;
		ad.appendChild(title);

		var countBox = document.createElement("div");
		countBox.setAttribute("class", "countBox");
		countBox.innerHTML = `距离广告关闭还有<span class="count">10</span>秒`;
		title.appendChild(countBox);

		var close = document.createElement("div");
		close.setAttribute("class", "close");
		close.innerHTML = `×`;
		title.appendChild(close);

		var img = document.createElement("img");
		img.setAttribute("src", "../images/bzsc-dgbhz-300-250-7-5.gif");
		img.setAttribute("alt", "");
		ad.appendChild(img);

		document.body.appendChild(ad);

		var count = 10;
		var intervalTimer = setInterval(function () {
			count--;
			countBox.innerHTML = `距离广告关闭还有<span class="count">${count}</span>秒`;
			if (count <= 0) {
				clearInterval(intervalTimer);
				ad.remove();
			}
		}, 1000)
	}, 5000);



</script>

</html>